<template>
    <div>
		<myheader></myheader>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas="datas"></Breadcrumb>

		
	<section class="featured-block text-center">
		
		<div class="container">  
			
			<table>
				<tr	>
					<td>商品名称：</td>
					<td><input type="text" name="name" id="" v-model="name"></td>
				</tr>
				<tr>
					<td>
						商品标签：
					</td>
					<td>
						<TagInput v-model="mytags" type="string" split=',' :limit="10" :wordlimit="20" placeholder='请输入标签，用英文逗号分隔，输入后回车'></TagInput>
					</td>
				</tr>
				<tr>
					<td>商品简介：</td>
					<td><input type="text" name="desc" id="" v-model="desc"></td>
					<td><quill-editor ref="myTextEditor" v-model="content" ></quill-editor></td>
				</tr>
				<tr>
					<td>颜色：</td>
					<td><input type="text" v-model="color"></td>
				</tr>
				<tr>
					<td>号码：</td>
					<td><input type="text" v-model="size"></td>
				</tr>
				<tr>
					<td>季节：</td>
					<td><input type="text" v-model="season"></td>
				</tr>
				<tr>
					<td>价格：</td>
					<td><input type="text" v-model="price"></td>
				</tr>
				
				
				<tr>
					<td></td>
					<td>
						<Button @click="submit" color='blue'>提交</Button>
					</td>
					
				</tr>
				
			</table>
			<img :src="src" alt="" width="20%">
		</div>
	</section>
		<myfooter></myfooter>
    </div>
</template>


<script>
import myheader from './myheader';
import myfooter from './myfooter';
import {config,formatXml} from '../config'
import {quillEditor} from 'vue-quill-editor'
//引入文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
	name:"myprofile",
	components:{
		'myheader':myheader,
		'myfooter':myfooter,
		'quillEditor':quillEditor
	},
    data () {
    return {
		msg: "这是一个变量",
		datas:[{title:'首页',route:{name:'index'}},
				{title:"修改商品"}
				],
		name:"",
		desc:'',
		color:'',
		size:"",
		season:'',
		price:0,
		cate_id:1,
		src:'',
		//商品标签变量
		mytags:'',
		//商品id
		id:'',
		//存储编辑器信息
		content:"",

    }
    },
    mounted:function(){
		//接收商品id
		var id = this.$route.query.id;

		this.id = id;
		this.get_data();
	},
	methods:{
		submit(){
			
			//	拼接商品规格
			var parms = {}
			parms['color'] = this.color;
			parms['size'] = this.size;
			parms['season'] = this.season;
			// console.log(parms)

			// 格式化字符串
			parms = JSON.stringify(parms)

			// console.log(parms)
			// parms = JSON.parse(parms);
			// console.log(parms)

			//发送请求
			this.axios({
				url:'http://127.0.0.1:8000/updategood/',
				params:{
					name:this.name,
					desc:this.content,
					parms:parms,
					price:this.price,
				}
			})
			.then(resp=>{
				// console.log(resp);	
				// console.log(this.content)
				// return false
				this.$Message(resp.data.message)
				//只有商品入库成功，才能添加标签
				if (resp.data.id) {
					//在这里再次请求
					this.axios({
						url:'http://127.0.0.1:8000/updatetags/',
						params:{
							id:resp.data.id,
							tags:this.mytags,

						}
					}).then(res=>{
						console.log(res)
					})
				}
				
			}).catch(error=>{
				console.log(error)
			})
		},
		
		get_data:function(){
			this.axios({
				url:'http://127.0.0.1:8000/gooditem/',
				params:{
					gid:this.id
				}
			}).then(resp=>{
				// console.log(resp);

				this.name = resp.data.data.name;
				this.desc = resp.data.data.desc;
				this.content = resp.data.data.desc;
				this.price = resp.data.data.price;

				var parms = resp.data.data.parms;

				//转换类型
				parms = JSON.parse(parms);

				this.color = parms.color;
				this.size = parms.size;
				this.season = parms.season;
				this.src = 'http://localhost:8000/static/upload/'+resp.data.data.img;

				// console.log(parms);

				//获取标签

			})
			this.axios({
				url:'http://127.0.0.1:8000/gettags/',
				params:{
					id:this.id
				}
			}).then(result=>{
				// console.log(result)
				var mytags = result.data.tags
				mytags = mytags.join(",");
				console.log(mytags)
				this.mytags = mytags;
				console.log(this.mytags)
			})
		},
	}
}


</script>


<style>
	td{padding: 5px;}
	.quill-editor{width: 500px;}

</style>